<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/daterangepicker.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="enterpriseCommon/common.css">
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <style>
    [v-cloak] {
      display: none;
    }

    .section311 .search {
      width: 600px;
    }

    .section311 .search .input {
      width: 435px;
    }

    .section311 .btn {
      margin-left: 20px;
      display: block;
      height: 50px;
    }

    .el-select input,
    .el-date-editor input {
      padding-left: 10px;
      height: 40px !important;
      border-color: #C7CBD0;
    }

    .el-cascader {
      width: 140px;
    }

    .el-cascader input {
      border: none;
    }

    .common-select {
      margin-left: 10px;
      width: 240px;
    }

    .time-select {
      margin: 0 10px;
      width: 170px !important;
      box-sizing: border-box;
    }

    .operate .btn,
    .operate .reset {
      display: inline-block;
      cursor: pointer;
      box-sizing: border-box;
    }

    .list {
      min-height: 300px;
    }

  </style>
  <script src="js/vue.js"></script>
  <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div id="app" v-cloak>
    <header>
    </header>
    <div class="header-space"></div>
    <section class="section311">
      <div class="content">

        <!-- <div style="float: right">
          <a href="./35.html" class="btn">发布职位</a>
        </div> -->
        <div class="search">
          <input v-model="position" type="text" placeholder="请输入关键词" class="input">
          <div class="line"></div>
          <el-cascader v-model="position_id" :options="positionList" :props="{
						value: 'id',
						label: 'name',
						children: 'children'
					}" placeholder="职位类别" class="half-select"></el-cascader>
        </div>
      </div>
    </section>
    <section class="section312">
      <div class="content">
        <div class="filter">
          <div class="item">
            <span class="tt">发布人</span>
            <select name="" id="" v-model="personId" placeholder="请选择发布人">
              <option v-for="item in personList" :key="item.id" :value="item.id" v-text="item.name"></option>
            </select>
          </div>
          <div class="item">
            <span class="tt">发布状态</span>
            <el-select v-model="status" placeholder="请选择发布状态" class="common-select">
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="item r">
            <span class="tt">发布时间</span>
            <el-date-picker v-model="startTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" class="time-select" @change="timeChangeHandle">
            </el-date-picker>
            <span class="ml5">--</span>
            <el-date-picker v-model="endTime" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" class="time-select" @change="timeChangeHandle">
            </el-date-picker>
          </div>
        </div>
        <div class="operate">
          <span class="btn" @click="searchHandle">搜索</span>
          <span class="reset" @click="resetHandle">清除</span>
        </div>
      </div>
    </section>
    <section class="section313">
      <div class="content">


        <div class="list-operate">
          <div class="left">
            <span class="txt">今日剩余刷新次数：{{refreshCount}}次</span>
            <a href="./38.html" class="blue">查看刷新记录</a>
          </div>
          <div class="right">
            <a href="./35.html" class="btn">发布职位</a>
          </div>
        </div>
        <div class="list">
          <div v-for="(item, index) in list" :key="item.id" :class="{'item-over': item.status === 1}" class="item" @click="goDetail(index)">
            <div class="title">
              <div class="left">
                <b>{{item.name}}</b>
                <span class="orange">{{item.salary_min}}~{{item.salary_max}}k</span>
                <small>{{item.area}} | {{item.education}} | {{item.experience_config}}年 | {{item.nature}} |
                  招{{item.num}}人</small>
              </div>
              <div  v-if="item.status !== 1" class="right">
                <time>最新刷新时间： {{item.updated_at}}</time>
              </div>
            </div>
            <div class="author">
              <div class="face"><a href="javascript:void(0)"><img :src="item.user.logo" alt=""></a></div>
              <div class="con">
                <h4>{{item.user.name}}</h4>
                <p>发布时间 {{item.created_at}}</p>
              </div>
            </div>
            <div class="info">
              <b class="black">已接收：{{item.recruit_user_count}}份简历</b>
              <span>待接受：{{item.status_array.daijieshou}}</span>
              <span>待面试：{{item.status_array.daimianshi}}</span>
              <span>被拒绝：{{item.status_array.beijujue}}</span>
              <span>不合适：{{item.status_array.bushihe}}</span>
              <span>未录用：{{item.status_array.weiluyong}}</span>
              <span>已录用：{{item.status_array.yiluyong}}</span>
            </div>
            <template v-if="item.status === 1">
              <div class="operate">
                <div class="left">
                  <span>招聘进度：</span>
                  <div class="percent">
                    <span class="per" :style="{width: item.progress}">{{item.progress}}</span>
                  </div>
                </div>
                <div class="right">
                  <a :href="'./35.html?id='+item.id" class="btn btn-white">修改职位</a><a href="javascript:void(0)" class="btn" @click.stop="showDialog(index)">开启职位</a>
                </div>
              </div>
              <img src="images/icon312.png" alt="" class="tag">
            </template>
            <template v-else>
              <div class="operate">
                <div class="left">
                  <span>招聘进度：</span>
                  <div class="percent">
                    <span class="per" :style="{width: item.progress}">{{item.progress}}</span>
                  </div>
                </div>
                <div class="right">
                  <a href="javascript:void(0)" class="btn btn-white" @click.stop="showDialog(index)">关闭职位</a><a href="javascript:void(0)" class="btn" @click.stop="refreshHandle(index)">刷新简历</a>
                </div>
              </div>
              <img src="images/icon311.png" alt="" class="tag">
            </template>
          </div>
          <div style="text-align: center;line-height: 80px;" v-show="isShowNoTip" v-text="'暂无数据'"></div>
        </div>



        <div class="g-prvNxt">
          <el-pagination background layout="prev, pager, next, jumper" :total="total" :size="pageSize" :current-page.sync="page" @current-change="pageChage">
          </el-pagination>
          <!-- <a href="javascript:void(0)" class="prev">&nbsp;</a>
					<a href="javascript:void(0)">1</a>
					<a href="javascript:void(0)" class="on">2</a>
					<a href="javascript:void(0)">3</a>
					<a href="javascript:void(0)">4</a>
					<a href="javascript:void(0)">5</a>
					<a href="javascript:void(0)">6</a>
					<a href="javascript:void(0)">7</a>
					<a href="javascript:void(0)">8</a>
					<a href="javascript:void(0)">9</a>
					<a href="javascript:void(0)">10</a>
					<a href="javascript:void(0)" class="next">&nbsp;</a>
					<select name="" id="">
						<option value="">10条/页</option>
						<option value="">20条/页</option>
						<option value="">30条/页</option>
						<option value="">40条/页</option>
						<option value="">50条/页</option>
					</select>
					跳至
					<input type="text" value="5" class="input">
					页
					<input type="submit" value="确定" class="btn"> -->
        </div>



      </div>
    </section>


    <footer>
      <div class="content"></div>
    </footer>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/slide.min.js"></script>
  <script src="js/polyfill.min.js"></script>
  <script src="js/jquery.nicescroll3.7.6.min.js"></script>
  <script src="js/main.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="js/request.js"></script>
  <script src="js/getPrepareData.js"></script>
  <script>
    $(function() {
      $("header").load("./enterpriseCommon/header.html");
      $("footer").load("./enterpriseCommon/footer.html");
    })
  </script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        refreshCount: 0,
        startTime: '',
        endTime: '',
        pageLimit: 10,
        position: '',
        position_id: '',
        positionList: [],
        status: '',
        statusList: [{
          name: '全部状态',
          id: ''
        }, {
          name: '已关闭',
          id: 1
        }, {
          name: '已开启',
          id: 0
        }],
        page: 1,
        total: 1,
        pageSize: 10,
        list: [],
        personList: [], // 发布人列表
        personId: '',
        changeStatusIndex: -1,
        isLoading: true
      },
      computed: {
        isShowNoTip: function() {
          return !(this.list.length || this.isLoading)
        }
      },
      created: function() {
        var self = this;
        prepare.getRecruitPrepare(function(data) {
          self.getRefreshCount();
          self.setTopData(data);
          self.getListData();
          self.fetchChildAccountList()
        })
      },
      methods: {
        // 获取发布人列表
        fetchChildAccountList: function() {
          var self = this;
          request('enterprise/employee/list', 'GET', {
            page: 1,
            is_all: 1
          }, function(res) {
            self.personList = [{
              id: '',
              name: '全部发布'
            }].concat(res.data.recruit)
          }, function(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            self.$message({
              type: 'warning',
              message: msg
            })
          })
        },
        getRefreshCount: function() {
          var self = this;
          request('enterprise/refresh/times', 'GET', '', function(res) {
            self.refreshCount = res.data.refresh_times
          })
        },
        getListData: function() {
          var params = {
            page: this.page,
            num: this.pageSize,
            position_id: this.position_id,
            keyword: this.position,
            status: this.status,
            start: this.startTime,
            end: this.endTime,
            enterprise_user_id: this.personId
          };
          Object.keys(params).forEach(function(key) {
            if (params[key] === '' || params[key] === null) delete params[key]
          })
          this.isLoading = true
          request('enterprise/recruit/list', 'GET', params, successFn.bind(this), failFn.bind(this));

          function successFn(res) {
            var data = res.data;
            var list = data.recruit;
            list.forEach(function(item) {
              var enterprise = item.enterprise;
              var user = item.user;
              item.user = user || enterprise;
              item.area = prepare.getRegionNameList(item.area_id).slice(-1)[0] || '' + item.address;
              item.experience_config = prepare.getExperience_configName(item.experience_config_id);
              item.education = prepare.getEducationName(item.education_id);
              item.nature = prepare.getNatureName(item.type);
              var status = item.status_array
              item.progress = Math.round(status.yiluyong / item.num * 100) + '%'
            })
            this.list = list;
            this.total = data.total
            this.isLoading = false
          }

          function failFn(err) {
            console.log(err);
            this.isLoading = false
          }
        },
        pageChage: function(page) {
          this.getListData()
        },
        goDetail: function(index) {
          var item = this.list[index];
          var url = (item.status === 1 ? './32.html' : './33.html') + '?id=' + item.id;
          location.href = url;
        },
        resetHandle: function() {
          this.position = this.position_id = this.status = this.startTime = this.endTime = this.personId = '';
          this.searchHandle();
        },
        searchHandle: function() {
          this.page = 1;
          this.getListData();
        },
        setTopData: function(data) {
          this.positionList = data.position;
          // this.statusList = data.status;
        },
        showDialog: function(index) {
          this.changeStatusIndex = index;
          this.$confirm('确认要关闭/开启职位吗？', '确认弹窗', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(this.changeStatus.bind(this)).catch(function() {

          });
        },
        // 开启、关闭职位
        changeStatus: function() {
          var index = this.changeStatusIndex;
          var item = this.list[index];
          var self = this;
          var status = +!item.status;
          request('enterprise/recruit/doOnOff/' + item.id, 'PUT', JSON.stringify({
            id: item.id,
            status: status
          }), function(res) {
            self.$message({
              type: 'success',
              message: res.message
            })
            item.status = status;
          }, function(err) {
            if (err.responseJSON) {
              self.$message({
                type: 'warning',
                message: err.responseJSON.message
              })
            }
          })
        },
        refreshHandle: function(index) {
          var self = this;
          var item = this.list[index];
          request('enterprise/refresh/do_refresh/' + item.id, 'PUT', '', function(res) {
            self.$message({
              type: 'success',
              message: '刷新成功'
            })
          }, function(err) {
            self.$message({
              type: 'error',
              message: err && err.responseJSON? err.responseJSON.message:'刷新失败'
            })
          })
        },
        timeChangeHandle: function() {
          if (this.endTime < this.startTime) {
            this.endTime = this.startTime
          }
        }
      }
    })

  </script>
</body>

</html>
